<template>
	<view>
		<view class="gl-header">
			<view class="gl-header-left" style="gap: 10px; flex-wrap: wrap;">
				<uni-search-bar v-model="search" placeholder="关键字搜索" cancelButton="none"
					@confirm="refresh"></uni-search-bar>
				<uni-data-select v-model="filter.modep" :localdata="maxModeData" emptyTips="没有" label="选择大类"
					placeholder="所有大类" style="width: 200px;" @change="maxModeChange"></uni-data-select>
				<uni-data-select v-model="filter.mode" :localdata="mixModeData" emptyTips="没有" label="选择小类"
					placeholder="所有小类" style="width: 200px;"></uni-data-select>
				<uni-data-select v-model="filter.pid" :localdata="allPlaceData" emptyTips="没有" label="选择商户"
					placeholder="所有商户" style="width: 200px;"></uni-data-select>
				<checkbox-group style="font-size: small;color: #6a6a6a;" @change="checkChange">
					<label>
						<checkbox value="status" :checked="checkData.includes('status')" style="transform:scale(0.7)" />
						启用
					</label>
					<label>
						<checkbox value="is_list" :checked="checkData.includes('is_list') "
							style="transform:scale(0.7)" />上架
					</label>
					<label>
						<checkbox value="is_share" :checked="checkData.includes('is_share') "
							style="transform:scale(0.7)" />推荐
					</label>
					<label>
						<checkbox value="is_master" :checked="checkData.includes('is_master') "
							style="transform:scale(0.7)" />
						返佣模式
					</label>
					<label>
						<checkbox value="is_points" :checked="checkData.includes('is_points') "
							style="transform:scale(0.7)" />
						积分兑换
					</label>
					<label>
						<checkbox value="is_card" :checked="checkData.includes('is_card') "
							style="transform:scale(0.7)" />礼包兑换
					</label>
				</checkbox-group>
			</view>
			<view class="gl-header-right">
				<view class="gl-button gl-button-error" @tap="EventButtonSku">
					<uni-icons type="gift" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">转换Sku</text>
				</view>
				<view class="gl-button gl-button-success" @tap="EventButtonNew()">
					<uni-icons type="folder-add" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">新增</text>
				</view>
				<!--
				<view class="gl-button gl-button-warning" @tap="EventButtonEdit">
					<uni-icons type="compose" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">编辑</text>
				</view>
				
				<view class="gl-button gl-button-error" @tap="EventTest">
					<uni-icons type="trash" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">移除</text>
				</view>
				-->
				<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
					@click="refresh">
					<uni-icons type="reload" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">刷新</text>
				</view>
				<!--
				<uni-icons :type=" showLine?'images':'list'" size="24" @tap="lineChange"></uni-icons>
				-->
			</view>
		</view>

		<view class="gl-body table-container" style="background-color: #f8f8f8;font-size: x-small;"
			:style="{height:swiperH+'px'}">
			<uni-table type="selection" emptyText="暂无更多数据">
				<uni-tr class="table-head">
					<uni-th align="center" width="30">ID</uni-th>
					<uni-th>名称</uni-th>
					<uni-th>分类</uni-th>
					<uni-th>商户</uni-th>
					<uni-th>销量</uni-th>
					<uni-th>库存</uni-th>
					<uni-th>价格</uni-th>
					<!--
							<uni-th>属性</uni-th> 
							-->
					<uni-th width="40">状态</uni-th>
					<uni-th width="40">上架</uni-th>
					<uni-th>操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in productData" :key="index">
					<uni-td align="center" width="30">{{item.id}}</uni-td>
					<uni-td><text style="font-weight: bold;" @tap="EventButtonNew(item)">{{item.name}}</text>
					</uni-td>
					<uni-td>{{item.max_mode.name}} -> {{item.min_mode.name}}</uni-td>
					<uni-td>{{item.pid_place.nicename}}</uni-td>
					<uni-td>{{item.hot}}</uni-td>
					<uni-td>{{item.cur_num}}</uni-td>
					<uni-td>
						<view style="display: flex;gap: 5px;">
							<text
								style="color: #6a6a6a;font-size: small;">￥{{(item.price.money / 100).toFixed(2)}}</text>
							<text
								style="color: #007aff;font-size: small;">￥{{(item.price.price / 100).toFixed(2)}}</text>
						</view>
					</uni-td>
					<!--
							<uni-td>
								<view class="">
									<label>
										<checkbox :checked="item.is_master === 1 " style="transform:scale(0.5)" />
										<text style="color: #4cd964;font-size: small;">返佣模式</text>
									</label>
									<label>
										<checkbox :checked="item.is_points === 1 " style="transform:scale(0.5)" />
										<text style="color: #f0ad4e;font-size: small;">积分兑换</text>
									</label>
									<label>
										<checkbox :checked="item.is_card ===1 " style="transform:scale(0.5)" /><text
											style="color: #007aff;font-size: small;">
											礼包兑换</text>
									</label>
								</view>
							</uni-td>
							-->
					<uni-td>
						<switch :checked="Boolean(item.status)" style="transform:scale(0.5)"
							@change="event => EventStateChange(event, item.id)" />
					</uni-td><uni-td>
						<switch :checked="Boolean(item.is_list)" style="transform:scale(0.5)"
							@change="event=>EventListChange(event,item.id)" />
					</uni-td>
					<uni-td>
						<text style="color: #007aff;font-size: small;" @tap="EventButtonNew(item)">编辑</text>
					</uni-td>

				</uni-tr>
			</uni-table>
		</view>

		<view class="gl-footer">
			<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
				@change="refresh" />
		</view>

		<popProductVue ref="popupProductBase" @refresh="refresh"></popProductVue>
	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import popProductVue from '@/components/sub-product/pop-product.vue'
	export default {
		data() {
			return {
				swiperH: 0,
				sConf: getApp().globalData,
				count: 0, // 记录数
				size: 50, // 页大小
				page: 1, // 当前页					
				search: '',
				maxModeData: [], // 大类
				mixModeData: [], // 小类
				allPlaceData: [], // 商户
				checkData: [], // 选择项目
				productData: [], // 商品列表
				filter: {
					modep: 0, // 大类
					mode: 0, // 小类
					pid: 0, // 商户
				},

			}
		},
		mounted() {
			console.log('页面挂载');
			let window = uni.getWindowInfo();
			this.designLayout(window.windowHeight);
			this.loadDefData()
		},
		components: {
			popProductVue
		},
		methods: {
			designLayout(wh) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.gl-body').boundingClientRect();
					query.select('.gl-footer').boundingClientRect();
					query.exec((res) => {
						this.swiperH = wh - Math.ceil(res[0].top) - Math.ceil(res[1].height) - 10;
					});
				})
			},
			loadDefData() {
				this.maxModeChange()
				this.allPlaceChange()

				this.refresh()
			},
			refresh() {
				let host = this.sConf.host + '/admin/cargoList/';
				let token = this.sConf.auth.token || '';
				let data = {
					page: this.page,
					size: this.size,
					ordering: '-id'
				}
				if (this.search.length > 0) {
					data.search = this.search
				}
				if (this.filter.mode) {
					data.mode = this.filter.mode
				}
				if (this.filter.modep) {
					data.modep = this.filter.modep
				}
				if (this.filter.pid) {
					data.pid = this.filter.pid
				}
				this.checkData.forEach(item => {
					data[item] = 1
				})
				console.log('查询参数', data);
				psMethod.authenticatorGetSync(host, token, data).then(res => {
					// console.log('加载商品列表', res);
					if (res.rescode === 200) {
						this.productData = res.resmsg
						this.count = res.count
						this.size = res.size
					}
				}).catch(err => {
					if (err.rescode === 404) {
						this.page--
					}
				})
			},
			async maxModeChange(e) {
				if (!e) {
					this.filter.mode = 0
				}
				let res = await this.loadModeList()
				if (res.rescode === 200) {
					let tmpData = []
					res.resmsg.forEach(item => {
						tmpData.push({
							value: item.id,
							text: item.name
						})
					})
					if (this.filter.modep > 0) {
						this.mixModeData = tmpData;
					} else {
						this.maxModeData = tmpData;
					}
				}
			},
			async allPlaceChange() {
				let res = await this.loadPlaceList()
				if (res.rescode === 200) {
					let tmpData = []
					res.resmsg.forEach(item => {
						tmpData.push({
							value: item.id,
							text: item.nicename
						})
					})
					this.allPlaceData = tmpData;
				}
			},
			async loadModeList() {
				let host = this.sConf.host + '/admin/cargoMode/';
				let token = this.sConf.auth.token || '';
				let data = {
					ordering: '-hot',
					parent: this.filter.modep || 0
				}
				let tmpData = await psMethod.authenticatorGetSync(host, token, data)
				return tmpData
			},
			async loadPlaceList() {
				let host = this.sConf.host + '/admin/placeList/';
				let token = this.sConf.auth.token || '';
				let data = {
					ordering: '-id'
				}
				let tmpData = await psMethod.authenticatorGetSync(host, token, data)
				return tmpData
			},
			checkChange(e) {
				this.checkData = e.detail.value
			},
			EventButtonNew(e = null) {
				// this.$emit('navPage', e)
				// if (!e) {
				// 	uni.$emit('productInfo', e)
				// } else {
				// 	uni.$emit('productInfo', e)
				// }
				if (!e) {
					let that = this
					uni.showModal({
						title: "新的商品",
						placeholderText: "请输入新的商品名称",
						editable: true,
						success(r) {
							if (r.confirm) {

								let host = that.sConf.host + '/admin/cargoBase/';
								let token = that.sConf.auth.token || '';
								let data = {
									name: r.content
								}
								psMethod.authenticatorPostSync(host, token, data).then(res => {
									console.log('创建商品', res);
									uni.showToast({
										title: '提交商品成功'
									})
									that.refresh()
								}).catch(err => {
									console.log('创建商品失败', err);
									uni.showModal({
										title: '失败',
										content: '创建商品失败',
										showCancel: false
									})
								})

							}
						}
					})
				} else {
					this.$refs.popupProductBase.open(e)
				}
				// uni.$emit('productInfo', e)
			},
			EventButtonSku() {
				let that = this
				uni.showModal({
					title: "转换Sku",
					placeholderText: '高危操作，请输入授权码',
					editable: true,
					success(r) {
						if (r.confirm) {
							console.log("授权码->", r.content);
							let host = that.sConf.host + '/admin/coverSku/';
							let token = that.sConf.auth.token || '';
							let data = {
								code: r.content
							}
							psMethod.authenticatorPostSync(host, token, data).then(res => {
								console.log('转换Sku', res);
								uni.showToast({
									title: '提交成功'
								})
							}).catch(err => {
								console.log('转换Sku__失败', err);
								uni.showToast({
									title: '提交失败',
									icon: 'error'
								})
							})
						}
					}
				})
			},
			EventStateChange(e, index) {
				console.log('EventStateChange', e.detail.value, index);
				let host = this.sConf.host + '/admin/cargoBase/' + index + '/';
				let token = this.sConf.auth.token || '';
				let data = {
					status: e.detail.value ? 1 : 0
				}
				psMethod.authenticatorPatchSync(host, token, data).then(res => {
					if (res.rescode === 200) {} else {
						uni.showToast({
							title: '请求失败'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '请求失败'
					})
				})
			},
			EventListChange(e, index) {
				console.log('EventListChange', e.detail.value);
				let host = this.sConf.host + '/admin/cargoBase/' + index + '/';
				let token = this.sConf.auth.token || '';
				let data = {
					is_list: e.detail.value ? 1 : 0
				}
				psMethod.authenticatorPatchSync(host, token, data).then(res => {
					if (res.rescode === 200) {} else {
						uni.showToast({
							title: '请求失败'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '请求失败'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 表格垂直滚动 */
	.table-container {
		/* height: 400px; */
		overflow-y: auto;

		::v-deep .uni-table .table-head th {
			font-weight: bold;
			z-index: 2;
			background-color: #fff;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}

		::v-deep .uni-table-scroll {
			overflow: visible;
		}
	}
</style>